<template>
  <div class="user_information">
    <title-bar :title="'用户资料'"/>
    <van-cell-group>
      <van-cell title="头像" class="cell_middle" style="margin-top: 46px;">
        <van-uploader :afterRead="avatarAfterRead">
          <div class="user_avatar_upload">
            <img
              :src="user.avatar + '?x-oss-process=image/resize,m_fill,h_50,w_50'"
              alt="你的头像"
              v-if="user.avatar"
            >
            <van-icon name="camera_full" v-else></van-icon>
          </div>
        </van-uploader>
      </van-cell>
      <van-field
        v-model="user.realname"
        label="姓名"
        placeholder="请输入姓名"
        icon="edit"
        input-align="right"
        :readonly="isTeam"
      />
      <van-cell title="性别" :value="genderText" @click="showSex = !isTeam" isLink/>
      <van-field
        v-model="user.mobile"
        label="电话"
        placeholder="请输入电话"
        icon="edit"
        input-align="right"
        :readonly="isTeam"
      />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="地区" :value="area" @click="showArea = !isTeam" isLink/>
      <van-field
        v-model="user.address"
        label="地址"
        placeholder="请输入详细地址"
        icon="edit"
        input-align="right"
        :readonly="isTeam"
      />
      <van-field
        v-model="user.xiaoqu"
        label="小区"
        placeholder="请输入小区名称"
        icon="edit"
        input-align="right"
        :readonly="isTeam"
      />
    </van-cell-group>

    <van-button round type="danger" size="large" @click="saveUserInfo">保存</van-button>
    <van-popup v-model="showSex" position="bottom">
      <van-picker
        showToolbar
        :columns="sexColumns"
        title="选择性别"
        @cancel="showSex = false"
        @confirm="onSexConfirm"
      />
    </van-popup>
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        title="选择省市区"
        @confirm="onAreaConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Uploader, Picker, Area } from "vant";
import { USER_PROFILE, USER_MODIFY } from "@/api/user";
import areaList from "../module-address-edit/area.json";
import TitleBar from "@/vue/components/title-bar/";
import { UPLOAD_FILE } from "@/api/global";
import { mobile } from "@/assets/js/regexp.js";

export default {
  data() {
    return {
      sexColumns: [
        {
          values: ["保密", "男", "女"],
          defaultIndex: 0
        }
      ],
      showSex: false,
      showArea: false,
      areaList
    };
  },

  computed: {
    genderText() {
      const text = ["保密", "男", "女"];
      return text[this.user.gender] || "";
    },
    area() {
      return this.user.province + " " + this.user.city + " " + this.user.area;
    },
    isTeam() {
      return this.user.isteam === 3;
    }
  },

  created() {
    this.getUserInfo();
  },

  methods: {
    avatarAfterRead(file) {
      let fd = new FormData();
      fd.append("file", file.file);
      // console.log(fd);
      this.$reqPost(UPLOAD_FILE, fd, {
        dataType: "json"
      })
        .then(res => {
          this.user.avatar = res.data.key;
        })
        .catch(res => {
          this.$dialog.alert({
            title: "警告",
            message: res.data.msg
          });
        });
    },
    getUserInfo() {
      this.$reqGet(USER_PROFILE, {
        id: this.user.id
      }).then(res => {
        this.user = res.data.data;
        this.saveUser(this.user);
      });
    },
    onSexConfirm(value, index) {
      this.user.gender = index[0];
      this.showSex = false;
    },
    saveUserInfo() {
      if (!this.user.mobile || !mobile(this.user.mobile)) {
        this.$toast("请输入正确的手机号码");
        return;
      }

      let user = {
        id: this.user.id,
        realname: this.user.realname,
        gender: this.user.gender,
        mobile: this.user.mobile,
        province: this.user.province,
        city: this.user.city,
        area: this.user.area,
        address: this.user.address,
        xiaoqu: this.user.xiaoqu,
        avatar: this.user.avatar
      };

      this.$reqPost(USER_MODIFY, user).then(res => {
        this.saveUser(this.user);
        this.$toast.success("保存成功");
      });
    },

    onAreaConfirm(datas) {
      this.showArea = false;
      this.user.province = datas[0].name;
      this.user.city = datas[1].name;
      this.user.area = datas[2].name;
    }
  },

  components: {
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Area.name]: Area,
    [TitleBar.name]: TitleBar
  }
};
</script>

<style lang="scss" scoped>
.user_information {
  .user_avatar_upload {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid $border-color;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: $border-color;
    }
  }
  .van-cell-group {
    margin-bottom: 10px;
  }
}
</style>